<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./assets/css/normalize.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./assets/css/common.min.css">
    <link rel="stylesheet" href="./assets/css/home.min.css">
</head>

<body>
    <header class="header">
        <div class="title">首页</div>
        <div class="box">
            <input name="KeyWord" class="search" type="text" placeholder="搜索你所想要的宝贝">
        </div>
    </header>

    <section class="banner-carousel">
        <!-- Swiper -->
        <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./assets/images/banner.png" alt=""></div>
                <div class="swiper-slide"><img src="./assets/images/banner.png" alt=""></div>
                <div class="swiper-slide"><img src="./assets/images/banner.png" alt=""></div>
                <div class="swiper-slide"><img src="./assets/images/banner.png" alt=""></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="nav">
        <div class="item">
            <div class="ico"></div>
            <div class="text">潮物</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">新奇</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">酷玩</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">时尚</div>
        </div>
    </section>

    <section class="hot-exchange">
        <div class="hd">
            <span class="title">热门互换</span>
            <span class="gd">更多</span>
            <span class="ico"></span>

        </div>
        <!-- Swiper -->
        <div class="swiper-container swiper2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="tt">新人特惠</div>
                    <div class="text">限时领取红包</div>
                    <div class="ico"></div>
                </div>
                <div class="swiper-slide">
                    <div class="tt">每日必换</div>
                    <div class="text">潮人必看指南</div>
                    <div class="ico"></div>
                </div>
                <div class="swiper-slide">
                    <div class="tt">品牌速看</div>
                    <div class="text">美好生活向导</div>
                    <div class="ico"></div>
                </div>
                <div class="swiper-slide">
                    <div class="tt">XXXX</div>
                    <div class="text">XXXXXXXXXX</div>
                    <div class="ico"></div>
                </div>
            </div>

        </div>

    </section>

    <section class="menus">
        <!-- swiper3 -->
        <div class="swiper-container swiper3">
            <div class="swiper-wrapper">
                <div class="swiper-slide selected">为你推荐</div>
                <div class="swiper-slide">潮物</div>
                <div class="swiper-slide">新奇</div>
                <div class="swiper-slide">酷玩</div>
                <div class="swiper-slide">时尚</div>
                <div class="swiper-slide">数码</div>
                <div class="swiper-slide">运动</div>
                <div class="swiper-slide">家居</div>
                <div class="swiper-slide">游戏</div>
                <div class="swiper-slide">服饰</div>
                <div class="swiper-slide">卡卷</div>
            </div>
        </div>
        <!-- swiper4 -->
        <div class="swiper-container swiper4">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide swiper-no-swiping">
                    <div class="tab-content">
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_1.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_3.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_2.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img"><img src="./assets/images/img_4.png" alt=""></div>
                            <div class="descr">宝贝大集合,冬日暖阳 温暖你的皮肤</div>
                            <div class="price"><span>￥</span>586</div>
                            <div class="demand">24人想换</div>
                            <div class="user-photo"></div>
                            <div class="box">
                                <div class="user-name">Gavin</div>
                                <div class="time-ago">8分钟前来过</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    </section>

    <footer class="footer-nav">

        <div class="item">
            <div class="ico"></div>
            <div class="text">首页</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">换圈</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">发布</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">探索</div>
        </div>
        <div class="item">
            <div class="ico"></div>
            <div class="text">我的</div>
        </div>

    </footer>

    <!-- JS -->
    <script src="./assets/js/jquery-3.5.1.min.js"></script>
    <script src="./assets/js/flexible.js"></script>
    <script src="./assets/js/swiper-bundle.min.js"></script>


    <!-- MySwiper -->
    <script src="./assets/js/myswiper.js"></script>
</body>

</html>